import 'package:bruno/bruno.dart';
import 'package:common/common.dart';
import 'package:common/image/image_tools.dart';
import 'package:flutter/material.dart';
import 'package:flutter_random_user/flutter_random_user.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import 'flutter_face_pile/flutter_face_pile.dart';
import 'pond_list_logic.dart';
import 'pond_list_state.dart';
import 'pond_sort_pop_widget.dart';
import 'sort_sheet_widget.dart';

/// @description:
/// @author
/// @date: 2025-02-17 20:42:46
class PondListPage extends StatefulWidget {
  const PondListPage({Key? key}) : super(key: key);

  @override
  State<PondListPage> createState() => _PondListPageState();
}

class _PondListPageState extends State<PondListPage> {
  final PondListLogic logic = Get.put(PondListLogic());

  final PondListState state = Get.find<PondListLogic>().state;

  GlobalKey sortKey = GlobalKey();
  late List<FaceHolder> _availableUsers;
  final _facePileUsers = <FaceHolder>[];

  @override
  void initState() {
    super.initState();

    _populateFakeUsers();
  }

  Future<void> _populateFakeUsers() async {
    final randomUsers = userGenerator(
      max: 6,
      loremIpsumParagraphs: 1,
      loremIpsumWords: 100,
    );

    _availableUsers = randomUsers
        .map(
          (randomUser) => FaceHolder(
            id: randomUser.userName,
            name: randomUser.firstName,
            avatar: NetworkImage(randomUser.thumbNail),
          ),
        )
        .toList();
    logs(_availableUsers);
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: BrnAppBar(
        title: '喵塘',
        centerTitle: false,
        actions: [
          Image.asset('assets/app/images/pond/pond_icon_all_read.png', width: 32),
          Image.asset('assets/app/images/pond/pond_icon_sort.png', key: sortKey, width: 32).onTap(() {
            PondSortPopWidget.show(context, sortKey: sortKey, sortCheck: 0);
          }),
          Image.asset('assets/app/images/pond/pond_icon_filt.png', width: 32).onTap(() {
            showModalBottomSheet(
                context: context,
                builder: (_) {
                  return const SortSheetWidget();
                });
          }),
        ],
      ),
      body: Column(
        children: [
          Container(
              height: 64.h,
              alignment: Alignment.center,
              padding: EdgeInsets.symmetric(horizontal: 16.w),
              color: Colors.white,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  Expanded(
                    child: Container(
                      alignment: Alignment.centerLeft,
                      child: FacePile(
                        faces: _availableUsers,
                        faceSize: 50,
                        facePercentOverlap: .6, // 40% face overlap.
                        borderColor: Colors.red,
                      ),
                    ),
                  ),
                  Container(
                    margin: const EdgeInsets.symmetric(horizontal: 10),
                    child: Text('点击查看新回应',
                        style: TextStyle(color: const Color(0xFF333333), fontSize: 12.sp, fontWeight: FontWeight.w600)),
                  ),
                  Container(
                      alignment: Alignment.center,
                      height: 29.h,
                      width: 52.w,
                      decoration:
                          BoxDecoration(color: const Color(0xFF25D4D0), borderRadius: BorderRadius.circular(14.5.r)),
                      child: Text("查看",
                          style: TextStyle(fontSize: 15.sp, color: Colors.white, fontWeight: FontWeight.w600)))
                ],
              )),
          Expanded(
            child: ListView.builder(
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  alignment: Alignment.center,
                  padding: const EdgeInsets.symmetric(horizontal: 16),
                  height: 70.h,
                  child: Row(
                    children: [
                      Stack(
                        children: [
                          ImageView(
                              url:
                                  'https://img1.baidu.com/it/u=728383910,3448060628&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
                              width: 50.w,
                              shape: BoxShape.circle,
                              type: ImageViewType.avater),
                          Container(
                            decoration: BoxDecoration(
                                color: const Color(0xFF37F756), borderRadius: BorderRadius.circular(4.5.r)),
                            height: 9,
                            width: 9,
                            margin: const EdgeInsets.only(top: 3, left: 5),
                          ),
                        ],
                      ),
                      Expanded(
                        child: Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 12),
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Row(
                                children: [
                                  Text(
                                    '游飞来寺',
                                    style: TextStyle(color: Colors.black, fontSize: 16.sp, fontWeight: FontWeight.w600),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.symmetric(horizontal: 6.0),
                                    child: Image.asset('assets/app/images/pond/pond_icon_girl.png', width: 16.w),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.symmetric(horizontal: 6.0),
                                    child: Image.asset('assets/app/images/pond/pond_icon_vip.png', width: 34.w),
                                  ),
                                  Container(
                                    alignment: Alignment.center,
                                    padding: EdgeInsets.symmetric(horizontal: 7.w),
                                    margin: const EdgeInsets.symmetric(horizontal: 6.0),
                                    height: 16.h,
                                    decoration: BoxDecoration(
                                        color: const Color(0xFFEEEEEE), borderRadius: BorderRadius.circular(8.r)),
                                    child:
                                        Text("已禁言", style: TextStyle(fontSize: 10.sp, color: const Color(0xFF999999))),
                                  )
                                ],
                              ),
                              Text(
                                '马上做，做精彩',
                                style: TextStyle(color: const Color(0xFF999999), fontSize: 14.sp),
                              ),
                            ],
                          ),
                        ),
                      ),
                      Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.end,
                        children: [
                          Container(
                              alignment: Alignment.center,
                              decoration: BoxDecoration(
                                  color: const Color(0xFFF74437), borderRadius: BorderRadius.circular(9.r)),
                              height: 18.h,
                              padding: const EdgeInsets.symmetric(horizontal: 5),
                              child: Text("99+", style: TextStyle(fontSize: 11.sp, color: Colors.white))),
                          Text(
                            '今天 12:23',
                            style: TextStyle(color: const Color(0xFF999999), fontSize: 14.sp),
                          ),
                        ],
                      )
                    ],
                  ),
                );
              },
              itemCount: 20,
            ),
          ),
        ],
      ),
      bottomNavigationBar: Container(
        padding: EdgeInsets.only(bottom: MediaQuery.of(context).padding.bottom + 20),
        color: Colors.white,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            GestureDetector(
              behavior: HitTestBehavior.opaque,
              onTap: () {},
              child: Container(
                  alignment: Alignment.center,
                  padding: EdgeInsets.symmetric(horizontal: 47.w),
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(23.r),
                      border: Border.all(color: const Color(0xFF25D4D0), width: 1)),
                  height: 46.h,
                  child: Text("扔一条",
                      style: TextStyle(fontSize: 15.sp, color: const Color(0xFF25D4D0), fontWeight: FontWeight.w600))),
            ),
            GestureDetector(
              behavior: HitTestBehavior.opaque,
              onTap: () {},
              child: Container(
                  alignment: Alignment.center,
                  padding: EdgeInsets.symmetric(horizontal: 47.w),
                  height: 46.h,
                  decoration: BoxDecoration(color: const Color(0xFF25D4D0), borderRadius: BorderRadius.circular(23.r)),
                  child:
                      Text("捞一条", style: TextStyle(fontSize: 15.sp, color: Colors.white, fontWeight: FontWeight.w600))),
            ),
          ],
        ),
      ),
    );
  }
}
